<script setup lang="ts">
import { useChannelStore } from '@/stores/channel'
import type { ArticleItem, ArticleResData } from '@/types'
import axios from 'axios'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const gotoDetail = (id: string) => {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}
// const props = defineProps<{ navId: number }>()
const store = useChannelStore()

const articleList = ref<ArticleItem[]>([])

watch(
  () => {
    return store.channelId
  },
  async () => {
    const res = await axios.get<ArticleResData>(`http://geek.itheima.net/v1_0/articles`, {
      params: {
        channel_id: store.channelId,
        timestamp: Date.now()
      }
    })
    articleList.value = res.data.data.results
  },
  { immediate: true }
)
</script>

<template>
  <div class="article-list">
    <div
      class="article-item"
      @click="gotoDetail(item.art_id)"
      v-for="item in articleList"
      :key="item.art_id"
    >
      <p class="title">{{ item.title }}</p>

      <img v-for="(img, index) in item.cover.images" :key="index" class="img" :src="img" alt="" />

      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
